<template>
    <div>
        <a-modal
            title="自动选派详情"
            :visible="visible"
            @ok="visible = false"
            @cancel="visible = false"
            cancelText="关闭"
            :width="1200"
            :footer="null"
            class="moreAutomaticList-modal-box"
            :dialogStyle="{top:'40px'}"
        >
            <template slot="footer">
                <div style="display: flex;justify-content: flex-end;">
                    <a-button type="primary" @click="visible = false">关闭</a-button>
                </div>
            </template>
            <commpVxeTable
                :key="manualKey"
                :isCanWrap="true"
                :canWrapTableHeight="320"
                :config="manualdataTableConfig" 
                :columns="manualcolumnsVxe" 
                :formItem="[]"
                @checkboxChange="checkboxChange"
                ref="acceptanceRegistrationRef"
            >
                <template v-slot:ysrs_default="{row}">
                    <div class="type-rs-box">
                        <div class="type-rs-item">
                            <span class="title">组长</span>
                            <span class="num-box num-box-lan">{{ row.fzzrs }}</span>
                        </div>、
                        <div class="type-rs-item">
                            <span class="title">组员</span>
                            <span class="num-box num-box-lan">{{ row.fzyrs }}</span>
                        </div>、
                        <div class="type-rs-item">
                            <span class="title">预备审评员</span>
                            <span class="num-box num-box-lan">{{ row.fybrs }}</span>
                        </div>
                    </div>
                </template>
                <template v-slot:cxrs_default="{row}">
                    <div class="type-rs-box">
                        <div class="type-rs-item">
                            <span class="title">组长</span>
                            <span class="num-box">{{ row.cxzzrs }}</span>
                        </div>、
                        <div class="type-rs-item">
                            <span class="title">组员</span>
                            <span class="num-box">{{ row.cxzyrs }}</span>
                        </div>、
                        <div class="type-rs-item">
                            <span class="title">预备审评员</span>
                            <span class="num-box">{{ row.cxybrs }}</span>
                        </div>
                    </div>
                </template>
                <template v-slot:fstate_default="{row}">
                    <span :class="row.fstate=='1'?'yzs-box':'zxz-box'">
                        {{ row.fstate=='0'?'执行中':(row.fstate=='1'?'已结束':'') }}
                    </span>
                </template>
                <template v-slot:fsmszt_default="{row}" data-desc="是否发送短信">
                    <div style="display: flex;align-items: center;">
                        <a-tooltip placement="bottomRight" v-if="row.fsmszt == '是'" >
                            <template slot="title">
                            <span>{{ row.fdqrdxnr }}</span>
                            </template>
                            <a-icon style="font-size: 18px;color: #5ca3e5;margin-right: 5px;" type="info-circle" />
                        </a-tooltip>
                        
                        <span>{{ row.fsmszt }}</span>
                    </div>
                </template>
            </commpVxeTable>
        </a-modal>
    </div>
</template>
<script>
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api'
export default {
    components:{
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            manualKey:null,
            manualformItem:[
                {
                    label: '真实姓名',
                    model: 'realname',
                }
            ],
            manualcolumnsVxe:[{
                title: '预设人数', //列头显示文字
                field: 'ysrs',
                slots: {
                    default: 'ysrs_default',
                },
                width:265,
            },{
                title: '抽选人数', //列头显示文字
                field: 'cxrs',
                slots: {
                    default: 'cxrs_default',
                },
                width:265,
            },
            // {
            //     title: '组长人数', //列头显示文字
            //     field: 'fzzrs',
            // },{
            //     title: '组员人数', //列头显示文字
            //     field: 'fzyrs',
            // },{
            //     title: '预备审评员人数', //列头显示文字
            //     field: 'fybrs',
            // },
            {
                title: '回避区域', //列头显示文字
                field: 'hbqy',
            },{
                title: '专业特长',
                field: 'zytc',
            },{
                title: '执行状态',
                field: 'fstate',
                slots: {
                    default: 'fstate_default',
                },
            },{
                title: '是否发送确认短信',
                field: 'fsmszt',
                width: 78,
                slots: {
                    default:'fsmszt_default',
                },
            }
            // ,{
            //     title: '短信内容',
            //     field: 'fdqrdxnr',
            // }
            ], 
            manualdataTableConfig:{
                api: assessCheckApi.sqsxYwxxqueryAutoXpryYwxxList,
                rowId: 'id',
                fywflcode:'001002',
                height:window.innerHeight - 200,
                paramet:{},
                isIdeaText:'',
                autoHidden:true,
            },
            selectArr:[],
            currentData:{},
            selectData:{},
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.currentData = val
            this.manualdataTableConfig.paramet={...val}

            this.manualKey = Date.now()
        },
        checkboxChange(val){
            //console.log(val)
        },
        handleOk(){
        }
    }
}
</script>
<style lang="less">
.moreAutomaticList-modal-box{
    .ant-modal-body{
        padding: 8px;
    }
    .zxz-box{
        color: #66c24f;
        border-color: #66c24f;
    }
    .yzs-box{
        color: #ed5565;
        border-color: #ed5565;
        
    }
    .type-rs-box{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .type-rs-item{
            .num-box{
                border-radius: 50%;
                display: inline-block;
                margin-left: 3px;
                // width: 28px;
                height: 22px;
                padding: 0 5px;
                text-align: center;
                line-height: 20px;
                color: #1ab394;
                border: 2px solid #1ab394;
            }
            .num-box-lan{
                color: #229dfc;
                border: 2px solid #229dfc;
            }
        }
    }
}
</style>